<template>
	<view class="cardstyle" :style="{'background-color': bgcolor}">
		<view style="display:flex;flex-direction: row;">
			<view v-if="mode==2">
				<image :src="showImage" @error="handleImageException(0)" style="height: 80px;width: 80px;"></image>
			</view>
			<view class="titlebox" style="padding-left: 10px;">
				<text>{{title}}</text>
			</view>
		</view>
		<view v-if="mode==3" class="adbox">
			
			<view v-for="item in imagess">
				<image :src="item" style="height: 80px;width: 80px;" @error="handleImageException()"></image>
				
			</view>
		</view>
		<view class="tipsbox">
			<text style="color: red" v-if="isTop">置顶</text>
			<text class="tips">{{author}}</text>
			<text class="tips">{{comments}}评</text>
			<view class="tipsend" style="padding-left: 20rpx">
				<text class="tips">{{time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NewsView",
		data() {
			return {
				defaultPic:"/static/news/load failed.png"
			};
		},
		computed:{
			showImage(){
				// return this.image[0] || this.defaultPic
				if(this.image[0]){
					if(this.imageError){
						console.log("showImage Error-->"+this.title);
					}
					return this.imageError? this.defaultPic:this.image[0]
				}else{
					console.log("showImage Default-->"+this.title);
					return this.defaultPic
				}
			}
		},
		methods:{
			handleImageException(index){
				console.log("handleImageException "+this.title);
				this.$set(this.image,index,this.defaultPic);
			}
		},
		props: {
			bgcolor:{
				type:String,
				default:'#fff'
			},
			title: {
				type: String,
				default: "新闻标题",
				require: true
			},
			isTop: {
				type: Boolean,
				default: false,
				require: true
			},
			author: {
				type: String,
				default: "来源",
				require: true
			},
			comments: {
				type: String,
				default: "0",
				require: true
			},
			time: {
				type: String,
				default: "2025.11.11",
			},
			mode:{
				type:Number,
				default:1,
				require:true
			},
			image:{
				type:Array,
				default:()=>[]
			},
			imagess:{
				type:Array,
				default:()=>[]
			}
		}
	}
</script>

<style>
	.cardstyle {
		margin: 10px;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(1, 0.5, 0.4, 0.4);
	}

	.titlebox {
		font-weight: bold;
		font-size: 20px;
	}

	.tipsbox {
		font-size: 15px;
		margin-top: 10px;
		display: flex;
	}

	.tips {
		margin-left: 10px;
		color: #aaa;
	}

	.tipsend {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	.adbox{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 10px;
	}
</style>